import React from "react";
import { View, Button } from "@tarojs/components";
import { AtIcon, AtBadge } from "taro-ui";

export const NavBottomBar = ({ value, onLeftBtnClick, onRightBtnClick, onCarIconClick }) => {
  return (
    <View className="tab-bottom-bar">
      <View className="left">
        <View className="left-item">左侧</View>
        <View className="left-item">左侧</View>
        <View className="left-item" onClick={() => onCarIconClick && onCarIconClick()}>
          <AtBadge value={value}>
            <AtIcon
              value="shopping-cart"
              color="#000"
              className="shopping-cart"
            ></AtIcon>
          </AtBadge>
        </View>
      </View>

      <View className="right">
        <View>
          <Button
            type="primary"
            size="mini"
            onClick={() => onLeftBtnClick && onLeftBtnClick()}
          >
            加入购物车
          </Button>
        </View>
        <View>
          <Button
            type="primary"
            size="mini"
            onClick={() => onRightBtnClick && onRightBtnClick()}
          >
            立即购买
          </Button>
        </View>
      </View>
    </View>
  );
};
